<template>
  <div class="models-show">
    <GLTFModule class="module-background" :dev-id="devId" />
<!--    标题-->
    <div class="div-on title">
      {{ this.poolName }}
    </div>
    <div class="div-on mix-chart" style="background-color: rgba(0, 0, 0, 0.5) !important;">
      <MixLittleChart :pool-info-data="poolInfoData" :id="2"/>
      <TriangleBar :id="'basic'" :tds="poolInfoData.tds" :tur="poolInfoData.turbidity" />
      <a-row>
        <a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
          <Dashboard :id="1" :value="30"/>
        </a-col>
        <a-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
          <Dashboard :id="2" :value="66"/>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import GLTFModule from "@/components/three/GLTFModel";
import MixLittleChart from "@/components/echarts/MixLittleChart";
import TriangleBar from "@/components/echarts/TriangleBar";
import Dashboard from "@/components/echarts/Dashboard";
import Axios from "axios";

export default {
  name: 'BasicDetail',
  components: {Dashboard, TriangleBar, MixLittleChart, GLTFModule},
  data() {
    return {
      poolName: "卓越泳池",
      devId: 754684848,
      // 泳池信息
      poolInfoData: {
        temperature: 28,
        waterLevel: 1.8,
        ph: 7,
        tds: 34,
        turbidity: 65,
        chlo: 12
      },
    }
  },
  mounted() {
    // TODO 暂时写死查询设备id
    this.getPoolInfoData(this.devId)
    this.getPoolData(this.devId)
  },
  methods: {
    getPoolInfoData(id) {
      Axios.get("http://119.3.218.80:8899/get", {
        params: {
          devId: id
        }
      }).then(res => {
        this.poolInfoData.tds = Number(res.data[0].value)
        this.poolInfoData.temperature = Number(res.data[1].value)
        this.poolInfoData.waterLevel = Number(res.data[2].value)
        this.poolInfoData.chlo = Number(res.data[3].value)
        this.poolInfoData.ph = Number(res.data[4].value)
        this.poolInfoData.turbidity = Number(res.data[5].value)
        console.log(res.data)
      }).catch(err => {
        console.log(err)
      })
    },
    getPoolData(id) {
      Axios.get("http://119.3.218.80:8899/getPool", {
        params: {
          devId: id
        }
      }).then(res => {
        this.poolName = res.data.pool_name
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.models-show {
  position: relative;
}
.module-background {
  position: absolute;
  z-index: 1;
}
.div-on {
  position: absolute;
  z-index: 2;
}
.mix-chart {
  background-color: rgba(0, 0, 0, 0.5) !important;
  margin: -10px;
  right: 2vh;
  width: 32vh;
  height: auto;
  border-radius: 15px 2px;
}
.title {
  font-size: 30px;
  font-weight: bolder;
  color: #1f1f1f;
  margin: -50px 0 0 70vh;
}
</style>
